<template>
	<div class="scrollCpn" ref='body'>
		<div ref='context'>
			<div class="loading" v-if="Pull">
				<div class="pulldown" v-show="!loading">
					<img width="30" src="../../../../public/images/xialajiazai.png" />
					<span>
						释放加载...
					</span>
				</div>
				<div v-show="loading">
					<img class="rotate" src="../../../../public/images/jiazaizhong.png" height="20" />
					<spah>
						加载中...
					</spah>
				</div>
			</div>
			<slot></slot>
			<div class="footer">
				<div class="B_loading" v-show="this.$props.Loading">
					资源加载中<img class="rotate" src="../../../../public/images/jiazaizhong.png" height="20" />
				</div>
				<div class="Bottom" v-show="!this.$props.Loading">
					我也是有底线的
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {defineComponent,onMounted,ref} from 'vue'
	//瀑布流
	import BScroll from '@better-scroll/core'
	//pc端兼容
	import MouseWheel from '@better-scroll/mouse-wheel'
	BScroll.use(MouseWheel)
	//下拉加载
	import PullDown from '@better-scroll/pull-down'
	import {$_} from '../../../assets/tools/throttle/throttle.js'
	BScroll.use(PullDown)
	
	export default defineComponent({
		props:{
			Pull:{
				type:Boolean,
				default:false
			},
			Loading:{
				type:Boolean,
				default:true
			}
		},
		setup(prop,ctx){
			var body=ref(null)
			var context=ref(null)
			var loading=ref(false)
			onMounted(()=>{
				let bs = new BScroll(body.value, {
					click:true,
					probeType:3,
					pullDownRefresh:true,
					mouseWheel: {
					  speed: 10,
					  invert: false,
					}
				})
				//
				var  refresh=$_(()=>{
					bs.refresh()
				},500)
				var Load=$_(()=>{
					ctx.emit('Load')
				},500)
				var map=body.value.children[0]
				bs.on('scroll',(e)=>{
					refresh()
					if(-e.y > map.offsetHeight/2){
						Load()
					}
				})
				bs.on('pullingDown',() => {
					if(!prop.Pull){
						bs.finishPullDown()
					}else{
						loading.value=true;
						ctx.emit('Pull',bs.finishPullDown.bind(bs))
					}
		
			  })

			})
			return{
				body,
				context,
				loading
			}
		}
	})
	
</script>

<style>
	.scrollCpn{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.loading{
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -50px;
	}
	.rotate{
		animation: rotate .5s linear infinite;
	}
	@keyframes rotate {
		0%{
			transform: rotateZ(0);
		}
		100%{
			transform: rotateZ(360deg);
		}
	}
	.footer{
		padding:10px 0;
		display: flex;
		justify-content: center;
		height: 10vh;
	}
</style>
